<template>
  <div class="accounts-page">
  <div class="banner-section mb-6">
      <BannerCarousel />
    </div>
  <div class="accounts-container">
    <!-- 移动端筛选条件切换按钮 -->
    <div class="mobile-filter-toggle">
      <a-button 
        type="primary" 
        @click="toggleMobileFilter"
        class="filter-toggle-btn"
        block
      >
        <i class="icon iconfont icon-shaixuan"></i>
        {{ mobileFilterVisible ? '隐藏筛选条件' : '显示筛选条件' }}
      </a-button>
    </div>
    <!-- 移动端筛选面板 -->
    <div v-if="mobileFilterVisible" class="mobile-filter-panel">
      <div class="title">
        <i class="icon iconfont icon-shaixuan"></i>
        <span>筛选条件</span>
      </div>

      <!-- <a-input-search
        v-model:value="searchValue"
        placeholder="请输入关键词"
        enter-button
        size="large"
        @search="onSearch"
        style="margin-top: 16px;"
      /> -->

      <a-collapse
        v-model:activeKey="activeKey"
        :bordered="false"
        class="filter-collapse"
      >
        <template #expandIcon="{ isActive }">
          <caret-right-outlined :rotate="isActive ? 90 : 0" />
        </template>
        
        <!-- 价格筛选 -->
        <a-collapse-panel key="2" header="价格区间" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.priceRanges" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="range in priceRangeOptions" 
                  :key="range.value" 
                  :value="range.value"
                  class="filter-checkbox"
                >
                  {{ range.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 安全箱筛选 -->
        <a-collapse-panel key="3" header="保险箱等级" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.safetyBoxes" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="box in safetyBoxOptions" 
                  :key="box.value" 
                  :value="box.value"
                  class="filter-checkbox"
                >
                  {{ box.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 体力等级筛选 -->
        <a-collapse-panel key="4" header="体力等级" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.energyLevels" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="energy in energyLevelOptions" 
                  :key="energy.value" 
                  :value="energy.value"
                  class="filter-checkbox"
                >
                  {{ energy.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 负重等级筛选 -->
        <a-collapse-panel key="5" header="负重等级" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.weightLevels" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="weight in weightLevelOptions" 
                  :key="weight.value" 
                  :value="weight.value"
                  class="filter-checkbox"
                >
                  {{ weight.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>

    <!-- 桌面端筛选面板 -->
    <div class="left-container">
      <div class="title">
        <i class="icon iconfont icon-shaixuan"></i>
        <span>筛选条件</span>
      </div>

      <!-- <a-input-search
        v-model:value="searchValue"
        placeholder="请输入关键词"
        enter-button
        size="large"
        @search="onSearch"
        style="margin-top: 16px;"
      /> -->

      <a-collapse
        v-model:activeKey="activeKey"
        :bordered="false"
        class="filter-collapse"
      >
        <template #expandIcon="{ isActive }">
          <caret-right-outlined :rotate="isActive ? 90 : 0" />
        </template>
        
        <!-- 段位筛选 -->
        <!-- <a-collapse-panel key="1" header="段位" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.ranks" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="rank in rankOptions" 
                  :key="rank.value" 
                  :value="rank.value"
                  class="filter-checkbox"
                >
                  {{ rank.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel> -->

        <!-- 价格筛选 -->
        <a-collapse-panel key="2" header="价格区间" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.priceRanges" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="range in priceRangeOptions" 
                  :key="range.value" 
                  :value="range.value"
                  class="filter-checkbox"
                >
                  {{ range.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 安全箱筛选 -->
        <a-collapse-panel key="3" header="保险箱等级" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.safetyBoxes" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="box in safetyBoxOptions" 
                  :key="box.value" 
                  :value="box.value"
                  class="filter-checkbox"
                >
                  {{ box.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 体力等级筛选 -->
        <a-collapse-panel key="4" header="体力等级" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.energyLevels" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="energy in energyLevelOptions" 
                  :key="energy.value" 
                  :value="energy.value"
                  class="filter-checkbox"
                >
                  {{ energy.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 负重等级筛选 -->
        <a-collapse-panel key="5" header="负重等级" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.weightLevels" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="weight in weightLevelOptions" 
                  :key="weight.value" 
                  :value="weight.value"
                  class="filter-checkbox"
                >
                  {{ weight.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel>

        <!-- 状态筛选 -->
        <!-- <a-collapse-panel key="6" header="账号状态" class="filter-panel">
          <div class="filter-content">
            <a-checkbox-group v-model:value="filters.statuses" @change="onFilterChange">
              <div class="checkbox-list">
                <a-checkbox 
                  v-for="status in statusOptions" 
                  :key="status.value" 
                  :value="status.value"
                  class="filter-checkbox"
                >
                  <span class="status-dot" :class="status.color"></span>
                  {{ status.label }}
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </div>
        </a-collapse-panel> -->
      </a-collapse>
    </div>

    <div class="right-container">
      <div class="right-top-container">
        <div class="title">
          找到 <span>{{ totalCount }}</span> 个账号
        </div>

        <div class="sorting">
          <a-select
            v-model:value="sortBy"
            style="width: 140px"
            size="middle"
            @change="onSortChange"
          >
            <a-select-option value="default">默认排序</a-select-option>
            <a-select-option value="price_asc">价格从低到高</a-select-option>
            <a-select-option value="price_desc">价格从高到低</a-select-option>
            <a-select-option value="create_time">最新发布</a-select-option>
            <a-select-option value="popularity">热门推荐</a-select-option>
          </a-select>
        </div>
      </div>

      <!-- 筛选操作按钮 -->
      <!-- <div class="filter-actions">
        <a-button 
          type="primary" 
          @click="applyFilters"
          :disabled="!hasActiveFilters"
          class="apply-btn"
        >
          应用筛选 ({{ totalSelected }})
        </a-button>
        <a-button 
          @click="resetFilters"
          :disabled="!hasActiveFilters"
          class="reset-btn"
        >
          重置
        </a-button>
      </div> -->

      <!-- 已选筛选标签 -->
      <div v-if="hasActiveFilters" class="selected-filters">
        <div class="selected-content">
          <div class="selected-title">已选条件：</div>
          <div class="filter-tags">
            <a-tag 
              v-for="tag in selectedFilterTags" 
              :key="tag.key"
              closable
              @close="removeFilter(tag)"
              class="filter-tag"
            >
              {{ tag.label }}
            </a-tag>
          </div>
          <a-button 
            @click="resetFilters"
            size="small"
            class="reset-btn-small"
          >
            重置
          </a-button>
        </div>
      </div>

      <!-- 账号列表区域 -->
      <div class="accounts-list">
        <div class="list-header">
      <div class="list-title">账号列表</div>
    </div>

        <!-- 账号卡片 -->
    <div class="accounts-grid" v-if="isMobile || viewMode === 'grid'">
          <div class="account-card" v-for="account in accounts" :key="account._id">
            <!-- 卡片头部 -->
            <div class="card-header">
              <div class="account-basic-info">
                <div class="account-image-wrapper">
                  <img :src="filterImage(account.image)" alt="账号图片" class="account-image" />
                </div>
                <div class="account-title-info">
                  <div class="account-number">{{ account.number }}</div>
                  <div class="account-tags">
                    <a-tag color="blue" size="small">{{ account.level }}级</a-tag>
                    <a-tag :color="account.server === 'QQ' ? 'blue' : 'green'" size="small">{{ account.server }}</a-tag>
                    <a-tag :color="account.loginMethod === '扫码登录' ? 'orange' : 'purple'" size="small">{{ account.loginMethod }}</a-tag>
                  </div>
                </div>
              </div>
              <div class="price-tag">
                <span class="price-value">¥{{ account.price }}</span>
              </div>
            </div>
            
            <!-- 卡片内容 -->
            <div class="card-content">
              <div class="stats-list">
                <!-- 纯币 -->
                <div class="stat-item">
                  <span class="stat-label">纯币</span>
                  <span class="stat-value">{{ account.coinAssets }}M</span>
                </div>
                <!-- 保险箱 -->
                <div class="stat-item">
                  <span class="stat-label">保险箱</span>
                  <a-tag :color="getSafetyBoxColor(account.safetyBox)" size="small">{{ formatSafetyBox(account.safetyBox) }}</a-tag>
                </div>
                <!-- 体力 -->
                <div class="stat-item">
                  <span class="stat-label">体力</span>
                  <span class="stat-value">{{ account.energyLevel }}级</span>
                </div>
                <!-- 负重 -->
                <div class="stat-item">
                  <span class="stat-label">负重</span>
                  <span class="stat-value">{{ account.weightLevel }}级</span>
                </div>
                <!-- 段位 -->
                <div class="stat-item">
                  <span class="stat-label">段位</span>
                  <a-tag :color="getRankColor(account.rank)" size="small">{{ account.rank }}</a-tag>
                </div>
                <!-- 外观 -->
                <div class="stat-item">
                  <span class="stat-label">外观</span>
                  <span class="stat-value">{{ account.appearance }}</span>
                </div>
              </div>
              
              <!-- 刀皮 -->
              <div v-if="account.weaponSkins && account.weaponSkins.length > 0" class="weapon-skins-section">
                <span class="stat-label">刀皮</span>
                <div class="weapon-skins">
                  <a-tag v-for="skin in account.weaponSkins.slice(0, 2)" :key="skin" size="small" color="purple">{{ skin }}</a-tag>
                  <span v-if="account.weaponSkins.length > 2" class="more-skins">+{{ account.weaponSkins.length - 2 }}</span>
                </div>
              </div>
              
              <!-- 账号记录 -->
              <!-- <div class="record-section">
                <a-tag :color="account.accountRecord === '无封禁记录' ? 'green' : 'red'" size="small" class="record-tag">
                  {{ account.accountRecord }}
                </a-tag>
              </div> -->
            </div>
            
            <!-- 底部按钮 -->
            <div class="card-footer">
              <a-button type="primary" size="small" @click="handleDetail(account)" block>查看详情</a-button>
            </div>
          </div>
        </div>

        <!-- 列表视图 -->
        <div class="accounts-table" v-else>
          <a-table 
            :columns="tableColumns" 
            :data-source="accounts" 
            :pagination="false"
            size="middle"
            class="custom-table"
          >
            <template #bodyCell="{ column, record }">
              
              <template v-if="column.key === 'number'">
                  <div class="headImg-info">
                    <img :src="filterImage(record.image)" alt="图片" />
                    <div class="headImg-info-text">
                      <div class="headImg-info-text-title">{{ record.level }}级账号</div>
                      <div class="headImg-info-text-desc">
                        <a-tag :color="record.loginMethod === '扫码登录' ? 'orange' : 'purple'" size="small">{{ record.loginMethod }}</a-tag>
                      </div>
                    </div>
                  </div>               
              </template>

              
              <template v-else-if="column.key === 'coinAssets'">
                {{ record.coinAssets }}M
              </template>

              <template v-else-if="column.key === 'safetyBox'">
                <a-tag :color="getSafetyBoxColor(record.safetyBox)" size="small">{{ formatSafetyBox(record.safetyBox) }}</a-tag>
              </template>

              <template v-else-if="column.key === 'rank'">
                <a-tag :color="getRankColor(record.rank)" size="small">{{ record.rank }}</a-tag>
              </template>

              <template v-else-if="column.key === 'action'">
                <a-space>
                  <a-button type="primary" size="small" @click="handleDetail(record)">详情</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <a-pagination
            v-model:current="currentPage"
            v-model:pageSize="pageSize"
            :total="totalCount"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :show-total="(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.accounts-page {
  max-width: 1120px;
  @media (max-width: 768px) {
    padding: 0 10px;
    background-origin: border-box;
  }
}
.accounts-container {
  width: 100%;
  height: 100%;
  display: flex;
  margin-bottom: 20px;
  
  // 默认隐藏移动端筛选相关元素
  .mobile-filter-toggle {
    display: none;
    margin-bottom: 16px;
  }
  
  .mobile-filter-panel {
    display: none;
  }
  
  // 桌面端布局
  .left-container {
    width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    padding: 24px;
    position: sticky;
    top: 20px;
    flex-shrink: 0;
  }
  
  .right-container {
    flex: 1;
    margin-left: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    padding: 24px;
    
    .right-top-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      
      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        
        span {
          margin: 0 6px;
          color: #165dff;
          font-weight: 700;
        }
      }
      
      .sorting {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  // 移动端布局
  @media (max-width: 768px) {
    flex-direction: column;
    
    .mobile-filter-toggle {
      display: block;
    }
    
    .mobile-filter-panel {
      display: block;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      background: #fff;
      padding: 16px;
      margin-bottom: 16px;
    }
    
    .left-container {
      display: none;
    }
    
    .right-container {
      margin-left: 0;
      padding: 16px;
    }
    
    // 适配账号列表
    .accounts-grid {
      grid-template-columns: 1fr;
    }
    
    // 适配表格视图
    .accounts-table {
      .custom-table {
        :deep(.ant-table-thead) {
          font-size: 12px;
        }
        
        :deep(.ant-table-tbody) {
          font-size: 12px;
        }
      }
    }
    
    // 适配分页组件
    .pagination-container {
      :deep(.ant-pagination) {
        font-size: 12px;
      }
      
      :deep(.ant-pagination-item) {
        min-width: 24px;
        height: 24px;
        line-height: 24px;
      }
    }
  }
}

.filter-collapse {
  margin-top: 16px;
  background: transparent;
  
  :deep(.ant-collapse-item) {
    border: none;
    margin-bottom: 8px;
    
    .ant-collapse-header {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 12px 16px;
      font-weight: 600;
      color: #333;
      transition: all 0.3s ease;
      
      &:hover {
        background: #e9ecef;
      }
    }
    
    .ant-collapse-content {
      border: none;
      background: transparent;
      
      .ant-collapse-content-box {
        padding: 16px;
        background: #fff;
        border-radius: 0 0 8px 8px;
        border: 1px solid #e9ecef;
        border-top: none;
      }
    }
  }
}

.filter-content {
  .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .filter-checkbox {
    margin: 0;
    
    :deep(.ant-checkbox-wrapper) {
      width: 100%;
      padding: 8px 12px;
      border-radius: 6px;
      transition: all 0.2s ease;
      
      &:hover {
        background: #f8f9fa;
      }
      
      .ant-checkbox {
        margin-right: 8px;
      }
      
      .ant-checkbox + span {
        color: #555;
        font-size: 14px;
      }
    }
    
    :deep(.ant-checkbox-checked .ant-checkbox + span) {
      color: #165dff;
      font-weight: 500;
    }
  }
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  
  &.green { background: #52c41a; }
  &.orange { background: #fa8c16; }
  &.red { background: #ff4d4f; }
  &.blue { background: #1890ff; }
}

.filter-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  
  .apply-btn {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-weight: 500;
  }
  
  .reset-btn {
    height: 40px;
    border-radius: 8px;
    color: #666;
    border-color: #d9d9d9;
    
    &:hover {
      color: #ff4d4f;
      border-color: #ff4d4f;
    }
  }
}

.selected-filters {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  
  .selected-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .selected-title {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
  }
  
  .filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    
    .filter-tag {
      background: #e6f7ff;
      border: 1px solid #91d5ff;
      color: #1890ff;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 12px;
      
      &:hover {
        background: #bae7ff;
      }
    }
  }
  
  .reset-btn-small {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 6px;
    color: #666;
    border-color: #d9d9d9;
    white-space: nowrap;
    
    &:hover {
      color: #ff4d4f;
      border-color: #ff4d4f;
    }
  }
}

// 账号列表样式
.accounts-list {
  .list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    
    .list-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .view-mode {
      .ant-radio-group {
        .ant-radio-button-wrapper {
          border-radius: 6px;
          border: 1px solid #d9d9d9;
          
          &:first-child {
            border-radius: 6px 0 0 6px;
          }
          
          &:last-child {
            border-radius: 0 6px 6px 0;
          }
        }
      }
    }
  }
}

// 网格视图样式
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  
  .account-card {
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    &:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
      border-color: #165dff;
    }
    
    .card-header {
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;
      
      .account-basic-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        
        .account-image-wrapper {
          .account-image {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #e8e8e8;
          }
        }
        
        .account-title-info {
          flex: 1;
          
          .account-number {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
            line-height: 1.2;
          }
          
          .account-tags {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
          }
        }
      }
      
      .price-tag {
        position: absolute;
        top: 16px;
        right: 16px;
        
        .price-value {
          background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
          color: white;
          font-size: 14px;
          font-weight: 700;
          padding: 6px 12px;
          border-radius: 16px;
          box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        }
      }
    }
    
    .card-content {
      padding: 12px 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      
      .stats-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        
        .stat-item {
          display: flex;
          align-items: center;
          gap: 4px;
          min-width: 0;
          flex: 0 0 auto;
          
          .stat-label {
            font-size: 11px;
            color: #888;
            font-weight: 500;
            white-space: nowrap;
          }
          
          .stat-value {
            font-size: 12px;
            color: #333;
            font-weight: 600;
            white-space: nowrap;
          }
        }
      }
      
      .weapon-skins-section {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .stat-label {
          font-size: 11px;
          color: #888;
          font-weight: 500;
          white-space: nowrap;
        }
        
        .weapon-skins {
          display: flex;
          gap: 4px;
          align-items: center;
          flex-wrap: wrap;
          
          .more-skins {
            font-size: 11px;
            color: #666;
            background: #f5f5f5;
            padding: 2px 6px;
            border-radius: 8px;
          }
        }
      }
      
      .record-section {
        margin-top: auto;
        display: flex;
        justify-content: center;
        
        .record-tag {
          border-radius: 6px;
        }
      }
    }
    
    .card-footer {
      padding: 12px 16px;
      border-top: 1px solid #f5f5f5;
      
      .ant-btn {
        height: 32px;
        border-radius: 6px;
        font-weight: 500;
      }
    }
  }
}

// 表格视图样式
.accounts-table {
  margin-bottom: 24px;
  
  .custom-table {
    :deep(.ant-table-thead > tr > th) {
      background: #fafafa;
      font-weight: 600;
      color: #333;
    }
    
    :deep(.ant-table-tbody > tr:hover > td) {
      background: #f5f5f5;
    }
  }
  
  .price-text {
    color: #ff4d4f;
    font-weight: 600;
  }
}

// 头像信息样式
.headImg-info {
  display: flex;
  align-items: center;
  gap: 12px;
  
  img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }
  
  .headImg-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    
    .headImg-info-text-title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    
    .headImg-info-text-desc {
      font-size: 12px;
      color: #666;
      line-height: 1.2;
    }
  }
}

// 分页样式
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}
</style>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import accountAPI from '~/api/account';

// 响应式数据
const activeKey = ref(['']);
const searchValue = ref('');
const mobileFilterVisible = ref(false);

// 切换移动端筛选显示/隐藏
const toggleMobileFilter = () => {
  mobileFilterVisible.value = !mobileFilterVisible.value;
};

// 筛选选项数据
const rankOptions = [
  { label: '青铜', value: 'bronze' },
  { label: '白银', value: 'silver' },
  { label: '黄金', value: 'gold' },
  { label: '铂金', value: 'platinum' },
  { label: '钻石', value: 'diamond' },
  { label: '大师', value: 'master' },
  { label: '王者', value: 'challenger' }
];

const safetyBoxOptions = [
  { label: '顶级安全箱 (3x3)', value: '顶级安全箱 (3x3)' },
  { label: '高级安全箱 (2x3)', value: '高级安全箱 (2x3)' },
  { label: '进阶安全箱 (2x2)', value: '进阶安全箱 (2x2)' },
  { label: '基础安全箱 (1x2)', value: '基础安全箱 (1x2)' }
];

const priceRangeOptions = [
  { label: '0-100元', value: '0-100' },
  { label: '100-300元', value: '100-300' },
  { label: '300-500元', value: '300-500' },
  { label: '500-1000元', value: '500-1000' },
  { label: '1000元以上', value: '1000+' }
];

const statusOptions = [
  { label: '可用', value: 'available', color: 'green' },
  { label: '使用中', value: 'in_use', color: 'orange' },
  { label: '维护中', value: 'maintenance', color: 'red' },
  { label: '待审核', value: 'pending', color: 'blue' }
];

// 体力等级选项
const energyLevelOptions = [
  { label: '1级体力', value: 1 },
  { label: '2级体力', value: 2 },
  { label: '3级体力', value: 3 },
  { label: '4级体力', value: 4 },
  { label: '5级体力', value: 5 },
  { label: '6级体力', value: 6 },
  { label: '7级体力', value: 7 }
];

// 负重等级选项
const weightLevelOptions = [
  { label: '1级负重', value: 1 },
  { label: '2级负重', value: 2 },
  { label: '3级负重', value: 3 },
  { label: '4级负重', value: 4 },
  { label: '5级负重', value: 5 },
  { label: '6级负重', value: 6 },
  { label: '7级负重', value: 7 }
];

// 筛选状态
const filters = ref({
  ranks: [],
  safetyBoxes: [],
  priceRanges: [],
  energyLevels: [],
  weightLevels: [],
  statuses: []
});

// 排序状态
const sortBy = ref('default');

// 视图模式
const viewMode = ref('list'); // 默认为列表模式

// 检测是否为移动端
const isMobile = ref(false);

onMounted(() => {
  // 检测设备类型
  isMobile.value = window.innerWidth <= 768;
  
  // 如果是移动端，默认设置为卡片模式
  if (isMobile.value) {
    viewMode.value = 'grid';
  }
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768;
    // 根据设备类型切换视图模式
    if (isMobile.value) {
      viewMode.value = 'grid';
    } else {
      viewMode.value = 'list';
    }
  });
  
  fetchAccounts();
});

// 表格列定义
const tableColumns = [
  {
    title: '账号信息',
    dataIndex: 'number',
    key: 'number',
    width: 140,
  },
  {
    title: '纯哈夫币',
    dataIndex: 'coinAssets',
    key: 'coinAssets',
    width: 100,
  },
  {
    title: '安全箱类型',
    dataIndex: 'safetyBox',
    key: 'safetyBox',
    width: 100,
  },
  {
    title: '体力',
    dataIndex: 'energyLevel',
    key: 'energyLevel',
    width: 100,
  },
  {
    title: '负重',
    dataIndex: 'weightLevel',
    key: 'weightLevel',
    width: 100,
  },
  {
    title: '段位',
    dataIndex: 'rank',
    key: 'rank',
    width: 100,
  },
  {
    title: '租金',
    dataIndex: 'price',
    key: 'price',
    width: 100,
  },
  {
    title: '押金',
    dataIndex: 'deposit',
    key: 'deposit',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
  },
];

// 计算属性
const totalSelected = computed(() => {
  return filters.value.ranks.length + 
         filters.value.safetyBoxes.length + 
         filters.value.priceRanges.length + 
         filters.value.energyLevels.length + 
         filters.value.weightLevels.length + 
         filters.value.statuses.length;
});

const hasActiveFilters = computed(() => {
  return totalSelected.value > 0;
});

const selectedFilterTags = computed(() => {
  const tags = [];
  
  // 段位标签
  filters.value.ranks.forEach(rank => {
    const option = rankOptions.find(opt => opt.value === rank);
    if (option) {
      tags.push({ key: `rank_${rank}`, label: `段位: ${option.label}`, type: 'ranks', value: rank });
    }
  });
  
  // 安全箱标签
  filters.value.safetyBoxes.forEach(box => {
    const option = safetyBoxOptions.find(opt => opt.value === box);
    if (option) {
      tags.push({ key: `box_${box}`, label: `保险箱: ${option.label}`, type: 'safetyBoxes', value: box });
    }
  });
  
  // 体力等级标签
  filters.value.energyLevels.forEach(energy => {
    const option = energyLevelOptions.find(opt => opt.value === energy);
    if (option) {
      tags.push({ key: `energy_${energy}`, label: `体力: ${option.label}`, type: 'energyLevels', value: energy });
    }
  });
  
  // 负重等级标签
  filters.value.weightLevels.forEach(weight => {
    const option = weightLevelOptions.find(opt => opt.value === weight);
    if (option) {
      tags.push({ key: `weight_${weight}`, label: `负重: ${option.label}`, type: 'weightLevels', value: weight });
    }
  });
  
  // 价格标签
  filters.value.priceRanges.forEach(range => {
    const option = priceRangeOptions.find(opt => opt.value === range);
    if (option) {
      tags.push({ key: `price_${range}`, label: `价格: ${option.label}`, type: 'priceRanges', value: range });
    }
  });
  
  // 状态标签
  filters.value.statuses.forEach(status => {
    const option = statusOptions.find(opt => opt.value === status);
    if (option) {
      tags.push({ key: `status_${status}`, label: `状态: ${option.label}`, type: 'statuses', value: status });
    }
  });
  
  return tags;
});

// 方法
const onSearch = () => {
  currentPage.value = 1
  fetchAccounts()
};

const onFilterChange = () => {
  currentPage.value = 1
  fetchAccounts()
};

const onSortChange = (value) => {
  sortBy.value = value
  currentPage.value = 1
  fetchAccounts()
};

const applyFilters = () => {
  currentPage.value = 1
  fetchAccounts()
};

const resetFilters = () => {
  filters.value = {
    ranks: [],
    safetyBoxes: [],
    priceRanges: [],
    energyLevels: [],
    weightLevels: [],
    statuses: []
  };
  searchValue.value = '';
  applyFilters();
};

const removeFilter = (tag) => {
  const { type, value } = tag;
  const index = filters.value[type].indexOf(value);
  if (index > -1) {
    filters.value[type].splice(index, 1);
  }
};

const onPageChange = (page, size) => {
  currentPage.value = page
  pageSize.value = size
  fetchAccounts()
};

const onPageSizeChange = (_, size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchAccounts()
};

const accounts = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)

const fetchAccounts = async () => {
  loading.value = true
  try {
    const params = { 
      page: currentPage.value, 
      limit: pageSize.value,
      keyword: searchValue.value
    }
    
    // 添加排序参数
    if (sortBy.value && sortBy.value !== 'default') {
      params.sortBy = sortBy.value
    }
    
    // 添加筛选参数
    if (filters.value.ranks.length > 0) {
      params.rank = filters.value.ranks.join(',')
    }
    if (filters.value.safetyBoxes.length > 0) {
      params.safetyBox = filters.value.safetyBoxes.join(',')
    }
    if (filters.value.priceRanges.length > 0) {
      params.priceRange = filters.value.priceRanges.join(',')
    }
    if (filters.value.energyLevels.length > 0) {
      params.energyLevel = filters.value.energyLevels.join(',')
    }
    if (filters.value.weightLevels.length > 0) {
      params.weightLevel = filters.value.weightLevels.join(',')
    }
    
    const res = await accountAPI.getAccounts(params)
    if (res.code === 200) {
      accounts.value = res.data.list
      totalCount.value = res.data.total
    } else {
      message.error(res.message || '获取数据失败')
    }
  } catch (e) {
    message.error('网络错误')
  } finally {
    loading.value = false
  }
}

const filterImage = (item) => {
    if (typeof item === 'string') {
      try {
        const arr = JSON.parse(item);
        return Array.isArray(arr) && arr.length > 0 ? arr[0] : '';
      } catch (e) {
        return '';
      }
    }
    return Array.isArray(item) && item.length > 0 ? item[0] : '';
}

// 格式化安全箱类型，去除"安全箱"三个字
const formatSafetyBox = (safetyBox) => {
  if (!safetyBox) return ''
  return safetyBox.replace('安全箱', '').trim()
}

// 获取段位颜色
const getRankColor = (rank) => {
  const colorMap = {
    '无段位': 'default',
    '青铜': 'brown',
    '白银': 'silver',
    '黄金': 'gold',
    '铂金': 'cyan',
    '钻石': 'blue',
    '黑鹰': 'purple',
    '三角洲巅峰': 'red'
  }
  return colorMap[rank] || 'default'
}

// 获取安全箱颜色
const getSafetyBoxColor = (safetyBox) => {
  const colorMap = {
    '顶级安全箱 (3x3)': 'red',
    '高级保险箱 (2x3)': 'orange',
    '进阶安全箱 (2x2)': 'blue',
    '基础安全箱 (1x2)': 'green'
  }
  return colorMap[safetyBox] || 'default'
}

const handleDetail = (account) => {
  // 跳转到账号详情页
  navigateTo(`/accounts/${account._id}`)
}

// 移除onMounted中的fetchAccounts调用，因为已经在检测设备类型后调用了

</script>



